//空调数据
var kong = [{
    id: 1,
    img: './img/空调.jpg',
    name: '空调',
    price: 1299
}, {
    id: 2,
    img: './img/空调.jpg',
    name: '空调',
    price: 1399
}, {
    id: 3,
    img: './img/空调.jpg',
    name: '空调',
    price: 1599
}, {
    id: 4,
    img: './img/空调.jpg',
    name: '空调',
    price: 1499
}, {
    id: 5,
    img: './img/空调.jpg',
    name: '空调',
    price: 2399
}, {
    id: 6,
    img: './img/空调.jpg',
    name: '空调',
    price: 2999
}, {
    id: 7,
    img: './img/空调.jpg',
    name: '空调',
    price: 2599
}, {
    id: 8,
    img: './img/空调.jpg',
    name: '空调',
    price: 2789
},]
//平板数据
var pad = [{
    id: 1,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 1299
}, {
    id: 2,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 1399
}, {
    id: 3,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 1599
}, {
    id: 4,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 1499
}, {
    id: 5,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 2399
}, {
    id: 6,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 2599
}, {
    id: 7,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 2799
}, {
    id: 8,
    img: "./img/小米平板.jpg",
    name: '平板',
    price: 2999
}]
//生活电器
var dianqi = [{
    id: 1,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 1299
}, {
    id: 2,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 1399
}, {
    id: 3,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 1599
}, {
    id: 4,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 1499
}, {
    id: 5,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 2399
}, {
    id: 6,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 2899
}, {
    id: 7,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 2099
}, {
    id: 8,
    img: "./img/小米扫地机器人.png",
    name: '扫地机器人',
    price: 3499
}]
//洗衣机
var xiyiji = [{
    id: 1,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 1299
}, {
    id: 2,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 1399
}, {
    id: 3,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 1599
}, {
    id: 4,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 1499
}, {
    id: 5,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 2399
}, {
    id: 6,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 2899
}, {
    id: 7,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 2099
}, {
    id: 8,
    img: './img/小米洗衣机.jpg',
    name: '洗衣机',
    price: 3499
}]
//冰箱
var bing = [{
    id: 1,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 1299
}, {
    id: 2,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 1399
}, {
    id: 3,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 1599
}, {
    id: 4,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 1499
}, {
    id: 5,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 2399
}, {
    id: 6,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 2899
}, {
    id: 7,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 2099
}, {
    id: 8,
    img: './img/小米冰箱.jpg',
    name: '冰箱',
    price: 3499
}]
//厨房大电
var chu = [{
    id: 1,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 1299
}, {
    id: 2,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 1399
}, {
    id: 3,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 1599
}, {
    id: 4,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 1499
}, {
    id: 5,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 2399
}, {
    id: 6,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 2899
}, {
    id: 7,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 2099
}, {
    id: 8,
    img: './img/小米厨房大电.jpg',
    name: '电饭煲',
    price: 3499
}]
//购物车
var car = []
var a = [...document.querySelectorAll('.title  span')]
var b = [...document.querySelectorAll('.good_lei .kk')]
a.forEach((item, index) => {
    $('.good_lei .kk').eq(0).css('display', 'block')
    item.addEventListener('click', () => {
        b.forEach((item1, index1) => {
            if (index == index1) {
                item1.style.display = 'block'
                $('.title span').eq(index).css('color', 'white')
                $('.title span').eq(index).css('background-color', 'red')
                $('.title span').eq(index).siblings().css('background-color', '')
                $('.title span').eq(index).siblings().css('color', '')
            } else {
                item1.style.display = 'none'
            }
        })
    })
})
//渲染
function kongtiao(a, b) {
    a.forEach(item => {
        $(b).append(`
                 <li onclick='add(${item.id})'>
                    <img src='${item.img}' alt=""><br>
                    <span>${item.name}</span>
                    <h4>￥<span>${item.price}</span></h4>
                </li>
                `)
    })
}
kongtiao(kong, '.good_list .kk .kong')
kongtiao(pad, '.good_list .kk .pad')
kongtiao(dianqi, '.good_list .kk .dianqi')
kongtiao(xiyiji, '.good_list .kk .xiyiji')
kongtiao(bing, '.good_list .kk .bing')
kongtiao(chu, '.good_list .kk .chu')
//添加到购物车
function add(id) {
    var a = kong.find(item => item.id == id)
    var b = car.some(item => item.id == a.id)
    if (b) {
        var c = car.findIndex(item => item.id == id)
        car[c].num++
        car_xuanran()
    } else {
        car.push({
            id: a.id,
            img: a.img,
            name: a.name,
            price: a.price,
            num: 1,
            is: false
        })
        car_xuanran()
    }
}
//购物车渲染
function car_xuanran() {
    $('.car_good').html('')
    car.forEach(item => {
        $('.car_good').append(`
                 <li>
                     <input type="checkbox" ${item.is ? 'checked' : ''} onclick='gou(${item.id})' class='fu'>&emsp;
                     <img src="${item.img}" alt="">&emsp;
                     <span>${item.name}</span>&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;&emsp;
                     <span>${item.price}</span>&emsp;
                     <button onclick='jian(${item.id})'>-</button>&emsp;
                     <span>${item.num}</span>&emsp;
                     <button onclick='jia(${item.id})'>+</button>&emsp;&emsp;&emsp;
                     <span class='xiao'>0</span>&emsp;&emsp;&emsp;&emsp;
                     <button onclick='remove(${item.id})'>删除</button>&emsp;
                 </li>
                `)
    })
}
//删除
function remove(id) {
    var a = car.findIndex(item => item.id == id)
    car.splice(a, 1)
    xiaoji()
    car_xuanran()
}
//+
function jia(id) {
    var a = car.find(item => item.id == id)
    a.num++
    xiaoji()
    car_xuanran()
}
//-
function jian(id) {
    var a = car.find(item => item.id == id)
    if (a.num > 1) {
        a.num--
        car_xuanran()
        xiaoji()
    }
}
//小计
function xiaoji() {
    var XiaoMoney = 0
    car.forEach(item => {
        if (item.is) {
            XiaoMoney += item.price * item.num
        }
    })
    document.querySelector('.z').innerHTML = XiaoMoney
}
//勾选
function gou(id) {
    var a = car.find(item => item.id == id)
    a.is = event.target.checked
    xiaoji()
}
//全选
function q() {
    car.forEach(item => {
        item.is = event.target.checked
        if (item.is) {
            $('.fu').prop('checked', true)
        } else {
            $('.fu').prop('checked', false)
        }
    })
    xiaoji()
}
